<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <search @sumbit='sumbit'>
        <!--  搜索项 -->
        <template slot='form'>
          <el-form :inline='true'
                   @submit.native.prevent
                   :model='dataForm'
                   ref='dataForm'>
            <el-form-item prop="name">
              <el-input v-model.trim="dataForm.name"
                        clearable
                        maxlength="20"
                        show-word-limit
                        placeholder="职位名称"></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model.trim="dataForm.code"
                        clearable
                        maxlength="20"
                        show-word-limit
                        placeholder="职位编号"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <!--  操作按钮 -->
        <template slot='btns'>
          <el-button type="primary"
                     plain
                     @click="syncrecord()">同步冲突修改记录</el-button>
          <el-button type="primary"
                     plain
                     v-loading="isLoading"
                     @click="sync()">同步职位</el-button>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('system:sysPosition:save')"
                     @click="addWin()">新增</el-button>
        </template>
      </search>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :dataList='dataList'
                      :index='true'>
        <template slot="code-after">
          <el-table-column prop="status"
                           align="center"
                           label="状态"
                           min-width="100"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status"
                         active-color="#13ce66"
                         :active-value="1"
                         :inactive-value="0"
                         inactive-color="#ff4949"
                         @change="switchChange(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
        </template>
        <template slot="code-after">
          <el-table-column prop="source"
                           align="center"
                           label="来源"
                           min-width="100"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.source === 1">同步</span>
              <span v-if="scope.row.source === 2">新增</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align='center'
                         align='center'
                         width='150'>
          <template slot-scope='scope'>
            <el-button v-if="scope.row.source === 2 &&$hasPermission('system:sysPosition:update')"
                       type='text'
                       class='brand'
                       @click="addWin(scope.row)"
                       size='small'>修改</el-button>
            <el-button v-if="scope.row.source === 2 &&$hasPermission('system:sysPosition:del')"
                       type='text'
                       class='danger'
                       @click="deleteHandle({id:scope.row.id})"
                       size='small'>删除</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10,20,50,100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
    </div>
    <positionadd ref="addOrUpdate"
                 @callBack="getDataList" />
    <usererrorList ref="usererrorList"
                   @callBack="getDataList" />
    <usererrorPage ref="usererrorPage"
                   @callBack="getDataList" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import positionadd from './position-add.vue'
import usererrorList from '../user/user-errorList.vue'
import usererrorPage from '../user/user-errorPage.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: 'system/sysPosition/sqlPage', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        updateStatusURL: '',
        deleteURL: 'system/sysPosition', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      isLoading: false,
      dataForm: {
      }
    }
  },
  components: { tableTemplate, Search, positionadd, usererrorList, usererrorPage },
  computed: {
    tableData () {
      return [
        { label: '职位名称', width: '100', prop: 'name' },
        { label: '职位编号', width: '100', prop: 'code' },
        { label: '更新人', width: '100', prop: 'updaterName' },
        { label: '更新时间', width: '150', prop: 'updateDate' },
        { label: '创建人', width: '100', prop: 'creatorName' },
        { label: '创建时间', width: '150', prop: 'createDate' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    syncrecord () {
      this.$refs.usererrorPage.init(3) // 1.同步用户 2.同步部门 3.同步职位
    },
    sync () {
      this.isLoading = true
      this.$http.post('system/sysPosition/sync').then(({ data: res }) => {
        if (res.code !== 0) {
          this.isLoading = false
          return this.$message.error(res.msg)
        } else {
          if (res.data.syncPositionList.length > 0) {
            this.$refs.usererrorList.init(res.data)
          } else {
            this.getDataList()
            this.$message.success('同步成功')
          }
        }
        this.isLoading = false
      })
    },
    switchChange (val) {
      let arr = {}
      arr.id = val.id
      arr.status = val.status
      this.$http.put('system/sysPosition/updateStatus', arr).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.$message.success('更新成功')
          this.sumbit()
        }
      })
    },
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    addWin (_id) {
      if (_id) {
        this.$refs.addOrUpdate.init(_id)
      } else {
        this.$refs.addOrUpdate.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.oneLine {
  overflow: hidden;
  white-space: nowarp;
  text-overflow: ellipsis;
}
.content {
  max-width: 300px;
}
</style>
